<template>
  <div class="container">
    <div class="home-search">
      <form action="/">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
          background="#ffffff"
        />
      </form>
    </div>
    <div class="home-swipe">
      <slides :slides="slides" style="height: 100%;"></slides>
    </div>
    <div class="category">
      <div v-for="(itme ,index) in category" :key="index">
        <img :src="itme.image" width="100%">
        <p>{{itme.mallCategoryName}}</p>
      </div>
    </div>
    <div class="picture">
      <img :src="picture.PICTUER_ADDRESS" width="100%">
    </div>
    <div class="recommend" style="margin-bottom: 0.2rem;margin-top: 0px;background-color: #ffff">
      <h3>商品推荐</h3>
      <div>
        <swiper :options="swiperOption">
          <swiper-slide v-for="(slide, index) in recommend" :key="index">
            <div class="slide-item">
              <img :src="slide.image" alt="" width="80%">
              <p class="jine">{{slide.goodName}}</p>
              <p>
                ￥{{slide.mallPrice|toFixed}}
                <br/>
                <del style="color: #ef4740">￥{{slide.price|toFixed}}</del>
              </p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="floor" style="">
      <div class="foor-1">
        <div class="foor-laft" style="">
          <img :src="floor1[0].image" alt="" width="100%" height="100%">
        </div>
        <div class="foor-right" style="width: 50%;height: 100%">
          <div style="height: 50%">
            <img :src="floor1[1].image" alt="" width="100%" height="100%">
          </div>
          <div style="height: 50%">
            <img :src="floor1[2].image" alt="" width="100%" height="100%">
          </div>
        </div>
      </div>
      <div class="foor-2">
        <div v-for="(item,index) in floor2" :key="index">
          <img :src="item.image" alt="" width="100%" height="100%">
        </div>
      </div>

    </div>
    <div style="width: 100%;height: 50px"></div>
    <tab-bar :active="0"></tab-bar>
  </div>
</template>

<script>

  import TabBar from "../base/tabBar";
  import slides from '../base/slides'
  import {SwipeItem, Swipe} from 'vant'
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {getSlidesData, getCategoryData, getRecommendData, getFloorsData} from "../../api";


  export default {
    name: "Home",
    data() {
      return {
        title: '安达市多',
        slides: [
          {
            image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602478088139&di=07e8bd967bc5e565abfbfca26ebbebf5&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853"
          },{
            image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602478122530&di=9b90a5b896fa3ab130c09a6646fb2882&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853"
          },{
            image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602478180886&di=c8f66b16c588817ebd2145f063d3eec8&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D583874135%2C70653437%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D3607%26h%3D2408"
          },
        ],
        value: '',
        category: [
          {
            image:""
          }
        ],
        picture: {
          "PICTUER_ADDRESS": "https://images.baixingliangfan.cn/advertesPicture/20180105/20180105115136_8151.gif"
        },
        swiperOption: {
          slidesPerView: 3
        },
        swiperSlides: [1, 2, 3, 4, 5],
        recommend: [],
        floor1: [
          {
            image:""
          },{
            image:""
          },{
            image:""
          },
        ],
        floor2: [

        ]

      }
    },
    components: {
      TabBar,
      slides,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      swiper,
      swiperSlide
    },
    created() {

      //轮播图请求
      this.getData();


    },
    mounted() {
      setInterval(() => {
        // console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    },
    methods: {
      onSearch() {
        alert("开始搜索")
      },
      onCancel() {
        alert("取消搜索")
      },
      async getData() {
        let data = await getSlidesData();
        // console.log(data);
        this.slides = data.slides;
        //类别请求
        this.getData2();
      },
      async getData2() {

        let dataC = await getCategoryData();
        // console.log(dataC.category[0].mallCategoryName);
        this.category = dataC.category;
        //类别请求
        this.getData3();
      },
      async getData3() {

        let dataR = await getRecommendData();
        // console.log(dataR.recommend);
        this.recommend = dataR.recommend;
        this.getData4();
      },
      async getData4() {

        let dataF = await getFloorsData();
        console.log(dataF.floor1);
        this.floor1 = dataF.floor1;
        this.floor2 = dataF.floor2;
      }
    }
  }
</script>

<style scoped lang="less">
  .container {
    background-color: #bbbbbb38;
    /*padding-bottom: 0.1rem;*/
    /*margin-bottom:0.1rem;*/
  }

  .home-swipe {
    width: 100%;
    height: 2.01rem;
    background-color: #42b983;
  }

  .category {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 0.2rem;
    background-color: #ffffff;
    padding-top: 0.2rem;

    div {
      width: 20%;
      margin: 0 0.1rem;

      p {
        font-size: 0.2rem;
        text-align: center;
      }
    }
  }

  .picture {
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
  }

  h3 {
    padding: 0px;
    margin: 0px;
  }

  .recommend {
    h3 {

      border-bottom: 1px solid #ddd;
      color: #e11488;
      padding: 0.1rem;
      box-sizing: border-box;
    }

    .slide-item {
      box-sizing: border-box;
      padding: 0.1rem;
      text-align: center;
      font-size: 10px;
      border-right: 1px solid #ddd;

      .jine {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .floor{
    width: 100%;
    .foor-1{
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      height: 200px;
      background-color: #e11488;
      margin-bottom: 3px;
      .foor-laft{
        width: 50%;
        height: 100%;
      }
    }
    .foor-2{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      div{
        width: 50%;
        box-sizing: border-box;
        margin-bottom: 3px;
      }
      div:nth-child(2n-1){
        border-right: 1px solid #bbb;
      }
    }
  }
</style>
